<template>
    <div class="title">考试数据统计</div>
    
    <div class="list">
        <span>我的课程：</span>
        <template v-if="isListLoad">
            <el-table :data="courseTableData" border style="width: 100%">
                <el-table-column prop="departmentName" label="开课单位" width="230"/>
                <el-table-column prop="courseId" label="课程编号" width="180"/>
                <el-table-column prop="courseName" label="课程名称"/>
                <el-table-column prop="courseHour" label="总学时"/>
                <el-table-column prop="credits" label="学分"/>
                <el-table-column prop="type" label="课程类别"/>
                <el-table-column prop="" label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="handleBrowse(scope.row.courseId)">
                            查看考试成绩
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    
    
    <div class="gradeList" v-if="isGradeListLoad" style="margin-top: 40px">
        <span>考试数据统计: </span>
        
        <div style="margin-top: 20px">
            <el-row>
                <el-col :span="6">
                    <el-statistic :value="Count">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                考试总人数
                                <el-icon style="margin-left: 4px" :size="12">
                                    <User/>
                                </el-icon>
                            </div>
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="6">
                    <el-statistic :value="Under">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                60分以下人数
                                <el-icon style="margin-left: 4px" :size="12">
                                    <User/>
                                </el-icon>
                            </div>
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="6">
                    <el-statistic :value="Above">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                90分以上人数
                                <el-icon style="margin-left: 4px" :size="12">
                                    <User/>
                                </el-icon>
                            </div>
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="6">
                    <el-statistic title="平均成绩" :value="Average">
                        <template #suffix>
                            <el-icon style="vertical-align: -0.125em">
                                <ChatLineRound/>
                            </el-icon>
                        </template>
                    </el-statistic>
                </el-col>
            </el-row>
        </div>
        
        <template v-if="isGradeListLoad" style="margin-top: 20px">
            <span>考试成绩：</span>
            <div style="margin-top: 20px">
                <el-table :data="gradeTableData" border style="width: 100%">
                    <el-table-column prop="studentNumber" label="学号" width="140"/>
                    <el-table-column prop="studentName" label="学生姓名"/>
                    <el-table-column prop="courseName" label="课程名称"/>
                    <el-table-column prop="type" label="课程类别"/>
                    <el-table-column prop="grade" label="分数" sortable/>
                </el-table>
            </div>
        </template>
    </div>

</template>

<script setup lang="ts">

// optional styles

import {ChatLineRound} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import {getTeacherCourseStandard, getTeacherDataStatistics} from "@/service/teacher/teacher.service";

const Count = ref(0)
const Average = ref(0)
const TotalGrade = ref(0)
const Under = ref('')
const Above = ref('')

const isListLoad = ref(false)
const isGradeListLoad = ref(false)
const courseTableData = ref([])
const gradeTableData = ref([])


onMounted(() => {
    getTeacherCourseStandard((data: any) => {
        let courseIdList: string[] = ['']
        // 当前教师课程列表
        console.log(data)
        let teacherCourseStandardList = data.teacherCourseStandardList
        for (const teacherCourseStandard of teacherCourseStandardList) {
            // 重复课程判断
            if (!courseIdList.includes(teacherCourseStandard.courseId)) {
                courseIdList.push(teacherCourseStandard.courseId)
                courseTableData.value.push(teacherCourseStandard)
            }
        }
    })
    
    isListLoad.value = true
})

function handleBrowse(courseNumber: string) {
    //初始化数据
    isGradeListLoad.value = true
    gradeTableData.value = []
    let courseId = courseNumber
    Count.value = 0
    TotalGrade.value = 0
    Under.value = ''
    Above.value = ''
    Average.value = 0
    let under = ref(0)
    let above = ref(0)
    
    getTeacherDataStatistics(courseId, (data: any) => {
        console.log('ok')
        console.log(data.teacherDataStatisticsList)
        let teacherDataStatisticsList = data.teacherDataStatisticsList
        // 计算人数
        Count.value = teacherDataStatisticsList.length
        
        
        for (const teacherDataStatistics of teacherDataStatisticsList) {
            gradeTableData.value.push(teacherDataStatistics)
            TotalGrade.value += teacherDataStatistics.grade
            if (teacherDataStatistics.grade < 60) {
                under.value++;
            }
            if (teacherDataStatistics.grade > 90) {
                above.value++;
            }
        }
        Under.value = under.value + "/" + Count.value
        Above.value = above.value + "/" + Count.value
        
        // 平均成绩
        Average.value = TotalGrade.value / Count.value
        
    })
}


</script>


<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 10px;
}

.option {
    margin-bottom: 20px;
}

.el-col {
    text-align: center;
}
</style>